<template>
  <div class="dashboard-container">
    <!-- <component :is="currentRole" /> -->
    <el-col :span="12">
     <el-col :span="12"   >
    <el-card :body-style="{ height:'190px'}" class="total-number">
      <div class="number-imgame"><img style="width:68px ;" :src="img1" class="image"></div>
      <div style="padding: 14px;">
        <span>设备总数</span>
        <span>{{deal_message.totalInfo.runState.totals}}</span>
        <div  class="total-item">
          <el-col :span="12"><span>启用</span><router-link tag='a' :to="'/device-basic/index'" ><el-link type="primary">{{deal_message.totalInfo.runState.starts}}</el-link></router-link></el-col>
          <el-col :span="12"><span>停用</span><router-link tag='a' :to="'/device-basic/index'" ><el-link type="primary">{{deal_message.totalInfo.runState.stops}}</el-link></router-link></el-col>
          <el-col :span="12"><span>正常运转</span><router-link tag='a' :to="'/device-basic/index'" ><el-link type="primary">{{deal_message.totalInfo.runState.normals}}</el-link></router-link></el-col>
          <el-col :span="12"><span>停机</span><router-link tag='a' :to="'/device-basic/index'" ><el-link type="primary">{{deal_message.totalInfo.runState.crashs}}</el-link></router-link></el-col>
        </div>
      
      </div>
    </el-card>
  </el-col>
  <el-col :span="12"   >
    <el-card :body-style="{ height:'190px'}" class="total-number">
      <div class="number-imgame"><img style="width:68px ;" :src="img1" class="image"></div>
      <div style="padding: 14px;">
        <!-- <span>2</span>
        <span>9999</span> -->
        <div  class="total-item">
          <el-col :span="12"><span>启用巡检计划</span><router-link tag='a' :to="'/device-patrol/plan'" ><el-link type="primary">{{deal_message.totalInfo.planCountNum.startedPatrols}}</el-link></router-link></el-col>
          <el-col :span="12"><span>启用点检计划</span><router-link tag='a' :to="'/plant-check/plan'" ><el-link type="primary">{{deal_message.totalInfo.planCountNum.startedChecks}}</el-link></router-link></el-col>
          <el-col :span="12"><span>启用保养计划</span><router-link tag='a' :to="'/device-preserve/plan'" ><el-link type="primary">{{deal_message.totalInfo.planCountNum.startedPreserves}}</el-link></router-link></el-col>
        </div>
      
      </div>
    </el-card>
  </el-col>
  <el-col :span="12"   >
    <el-card :body-style="{ height:'190px'}" class="total-number">
      <div class="number-imgame"><img style="width:68px ;" :src="img2" class="image"></div>
      <div style="padding: 14px;">
        <span>维修单</span>
        <span>{{deal_message.totalInfo.orderCountNum.repairNum}}</span>
        <div  class="total-item">
           <el-col :span="12"><span>待维修</span><span>{{deal_message.totalInfo.orderCountNum.repairNumByWaitRepair}}</span></el-col>
          <el-col :span="12"><span>维修中</span><span>{{deal_message.totalInfo.orderCountNum.repairNumByRepair}}</span></el-col>
          <el-col :span="12"><span>待验收</span><span>{{deal_message.totalInfo.orderCountNum.repairNumByWaitCheck}}</span></el-col>
        </div>
      
      </div>
    </el-card>
  </el-col>
    <el-col :span="12"   >
    <el-card :body-style="{ height:'190px'}" class="total-number">
      <div class="number-imgame"><img style="width:68px ;" :src="img3" class="image"></div>
      <div style="padding: 14px;">
        <span>维护单</span>
        <span>{{deal_message.totalInfo.orderCountNum.mainNum}}</span>
        <div  class="total-item">
            <el-col :span="12"><span>待维护</span><span>{{deal_message.totalInfo.orderCountNum.mainNumByWaitMain}}</span></el-col>
          <el-col :span="12"><span>维护中</span><span>{{deal_message.totalInfo.orderCountNum.mainNumByMain}}</span></el-col>
          <el-col :span="12"><span>待验收</span><span>{{deal_message.totalInfo.orderCountNum.mainNumByWaitCheck}}</span></el-col>
        </div>
      
      </div>
    </el-card>
  </el-col>
   
    </el-col>
    <el-col :span="12" class="unfinished-item">
      <h-table-list
        
       
        type="local"
        :data="deal_message.list"
        :page-sizes="[3,10]"
        :columns="columns"
        :paginationInfo="paginationInfo"
      >
        <!-- <ListOpearteButton /> -->
        <p>待办事项</p>
        <template slot="operate-column" slot-scope="scope">
          <el-button @click="gotoRouter(scope.row)">去处理</el-button>
        </template>
      </h-table-list>
    </el-col>
    <el-col :span="12">
     <el-col :span="12"   >
    <el-card  class="total-number-img">
      <div style="padding: 14px;">
        <p>设备类别占比</p>
        <div class="total-item-chart">
          <PieChart  v-if="deal_message.totalInfo.typePercent" :data="pieData" :dataType="pieDataType"/>
        </div>
      </div>
    </el-card>
  </el-col>
   <el-col :span="12"  >
    <el-card :body-style="{ height:'190px'}" class="total-number-img">
      <div style="padding: 14px;">
        <p>近七日故障趋势</p>
        <div class="total-item-chart">
         <LineChart v-if="deal_message.totalInfo.trendFault" />
        </div>
      </div>
    </el-card>
  </el-col>
    </el-col>
    <el-col :span="12" class="rencentSeven-item">
      <h-table-list
        border
        type="local"
        :data="deal_message.bugList"
       :page-sizes="[3,10]"
         :columns="columns2"
        :paginationInfo="paginationInfo2"
      >
        <p>近7日故障明细</p>
        <template slot="preview-column" slot-scope="scope">
          <p @click="{{scope.row.id}}">去处理</p>
        </template>
      </h-table-list>
    </el-col>
  </div>
</template>

<script>
import { mapGetters,mapState  } from 'vuex'
//import adminDashboard from './admin'
//import editorDashboard from './editor'
import PieChart from './components/pieChart'
import LineChart from './components/lineChart'
import {formatState} from '@/filters/index'
import a from './a.png'
import b from './b.png'
import d from './d.png'
import {getRouterByType} from './const'
export default {
  name: 'Dashboard',
  components: { PieChart,LineChart },
  data() {
    return {
      pieData:[],
      pieDataType:[],
      img1:a,
      img2:b,
      img3:d, 
  //     totalData:[{
  //       title:"设备总数",
  //       img:a 
  //     },{
  //  title:"设备总数",
  //  img:b    
  //     },{
  //  title:"维修单", 
  //  img:d  
  //     },{
  //  title:"维护单",   
  //  img:d
  //     }],
      currentRole: 'adminDashboard',
       tableData: [
        
      ],
      paginationInfo: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
        
          this.$store.dispatch("deal_message/requestList", {
            current: e,
          });
        },
        current: 1,
        total:0 ,
      },
      paginationInfo2: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
        
          this.$store.dispatch("deal_message/requestList", {
            current: e,
          });
        },
        current: 1,
        total:0 ,
      },
      columns: [
        { type: "index", label: "序号"},
        {
          prop: "labelName",
          label: "任务类型",
          render:(row)=>{
            return row.labelName+formatState(row.state)
          }
        },
        {
          prop: "createdBy",
          label: "创建人",
          
        },
        {
          prop: "createdTime",
          label: "创建时间",
          width: 100,
          filter:"formatDate"
        },
        {
          prop: "operate",
          label: "操作",
          //minWidth: 180,
          slotName: "operate-column",
          //fixed: "right",
        },
      ],
      columns2: [
        { type: "index", label: "序号"},
        {
          prop: "deviceName",
          label: "设备名称",
        },
        
        {
          prop: "assetNumber",
          label: "设备编号",
          width: 100,
         
        },
        {
          prop: "createdTime",
          label: "故障发生时间",
          filter:"formatDate"
        },
        {
          prop: "faultDesc",
          label: "故障描述",
          width: 100,
         
        },
        {
          prop: "faultType",
          label: "故障种类",
          width: 100,
         
        },
        {
          prop: "faultLevel",
          label: "故障等级",
          width: 100,
         
        }
      ],
    }
  },
  computed: {
    ...mapGetters([
      'roles',
    ]),
    ...mapState(['deal_message']),
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
   this.getList()
  },
  methods:{
    gotoRouter(row){
       console.log(row.extJson,"点击数据")
       localStorage.setItem(getRouterByType(row.typeId),row.toDoId)
       this.$router.push(getRouterByType(row.typeId))
    },
   async getList(){
    await this.$store.dispatch("deal_message/requestList")
     const data= await  this.$store.dispatch("deal_message/resuestBugList")
   const bugData= await this.$store.dispatch("deal_message/questDashBoardInfo")
 
   //this.pieData=this.$store.state.deal_message.totalInfo.trendFault.map(e=>{return e.day})
   //this.pieData=this.$store.state.deal_message.totalInfo.typePercent.map(e=>{return e.typeName})
   //this.pieDataType=this.$store.state.deal_message.totalInfo.typePercent.map(e=>{return {value:e.totals,name:e.typeName}})
    this.$set(this.paginationInfo,"total",this.$store.state.deal_message.total) 
     this.$set(this.paginationInfo2,"total",this.$store.state.deal_message.bugTotal) 
    }
  }
}
</script>
<style lang="scss">
.total-number{
  position: relative;
  border-left: 5px solid #000;
  margin-left:20px;
  height:190px;
  .total-item{
    position:absolute;
    bottom: 30px;
   
  }
}
.total-number-img{
  height:450px;
  margin-left:20px;
}
.number-imgame{
  position:absolute;
  top:30px;
  right:30px;
}
.unfinished-item{
  background: white;
  height:380px;
  padding:20px;
  margin-bottom: 20px;
}
.rencentSeven-item{
   background: white;
  height:450px;
  padding:20px;
  margin-bottom: 20px;
}
.total-item-chart{
  height:300px;
}
</style>

